<script setup lang='ts'>
import { nextTick, onMounted, ref } from 'vue'
import { NButton, NCard, NModal, NTabPane, NTabs, useDialog } from 'naive-ui'
import { fetchPayGetResourceBundle, fetchPayGetResourceBundlePayUrl, fetchPayGetSubscribePayUrl, fetchPayPlan } from '@/api'
const dialog = useDialog()
// const message = useMessage()
// const userStore = useUserStore()
// const userInfo = computed(() => userStore.userInfo)
const showModal = ref(false)
const bodyStyle = {
  width: '530px',
}
onMounted(() => {
  // const token = sessionStorage.getItem('token')
  // if (token)
  //   userStore.getUserInfo()
})

const payList = ref<any>([])
const getList = () => {
  fetchPayPlan().then((res) => {
    payList.value = res.data
  })
}
const resList = ref<any>()
const getResList = () => {
  fetchPayGetResourceBundle().then((res) => {
    // console.log(res)
    resList.value = res.data
  })
}
const vHtml = ref()
const payClick = (id: Number) => {
  fetchPayGetSubscribePayUrl({
    payId: id,
  }).then((res) => {
    vHtml.value = res
    nextTick(() => {
      dialog.success({
        title: '支付确认',
        content: '即将跳转支付，请在新页面中完成支付',
        positiveText: '确定支付',
        negativeText: '取消支付',
        maskClosable: false,
        onPositiveClick: () => {
          document.forms[0].submit()
        },
        onMaskClick: () => {

        },
        onEsc: () => {
        },
      })
      setTimeout(() => {
        document.forms[0].submit()
        // dialog.destroyAll()
        // dialog.warning({
        //   title: '支付确认',
        //   content: '是否支付成功',
        //   positiveText: '支付成功',
        //   negativeText: '支付失败',
        //   onPositiveClick: () => {
        //     location.reload()
        //   },
        //   onNegativeClick: () => {

        //   },
        // })
      }, 2000)
    })
  })
}
const payClickRes = (id: Number) => {
  fetchPayGetResourceBundlePayUrl({
    rid: id,
  }).then((res) => {
    vHtml.value = res
    nextTick(() => {
      dialog.success({
        title: '支付确认',
        content: '即将跳转支付，请在新页面中完成支付',
        positiveText: '确定支付',
        negativeText: '取消支付',
        maskClosable: false,
        onPositiveClick: () => {
          document.forms[0].submit()
        },
        onMaskClick: () => {

        },
        onEsc: () => {
        },
      })
      setTimeout(() => {
        document.forms[0].submit()
      }, 2000)
    })
  })
}
const show = () => {
  showModal.value = true
  getList()
  getResList()
}
defineExpose({ show })
</script>

<template>
  <NModal v-model:show="showModal" class="custom-card" preset="card" title="" size="huge" :style="bodyStyle">
    <NTabs type="segment">
      <NTabPane name="chap1" tab="GPT3.5聊天订阅">
        <NCard title="" class="custom-card-put">
          <div class="pay-list">
            <div v-for="item in payList" :key="item.id" class="pay-list-item">
              <div class="pay-list-item-li title">
                {{ item.payName }}
              </div>
              <div class="pay-list-item-li price">
                {{ item.price }} <span class="price-unit">元</span>
              </div>
              <div class="pay-list-item-li date">
                有效期：<span>{{ item.day }}天</span>
              </div>
              <div v-if="item.resourceSet" class="pay-list-item-li date">
                <div style="color:#f0a020;text-align: center;font-weight: bold;">
                  赠送：
                </div>
                <div v-for="res in item.resourceSet" :key="res.id" style="color:#f0a020">
                  {{ res.name }}：{{ res.count }}次
                </div>
              </div>
              <div class="pay-list-item-li">
                <NButton type="primary" @click="payClick(item.id)">
                  购买
                </NButton>
              </div>
            </div>
          </div>
          <div class="html-pay" v-html="vHtml" />
        </NCard>
      </NTabPane>
      <NTabPane name="chap2" tab="GPT4.0资源包及其他">
        <NCard title="" class="custom-card-put">
          <div v-for="item in resList" :key="item.id" class="res-main">
            <NCard :title="item.name" class="custom-card-put">
              <div class="pay-list">
                <div v-for="res in item.resourceSet" :key="res.id" class="pay-list-item">
                  <div class="pay-list-item-li title">
                    {{ res.name }}
                  </div>
                  <div class="pay-list-item-li price">
                    {{ res.price }} <span class="price-unit">元</span>
                  </div>
                  <div class="pay-list-item-li date">
                    有效期：<span>永久</span>
                  </div>
                  <div class="pay-list-item-li">
                    <NButton type="primary" @click="payClickRes(res.id)">
                      购买
                    </NButton>
                  </div>
                </div>
              </div>
              <div class="html-pay" v-html="vHtml" />
            </NCard>
          </div>
        </NCard>
      </NTabPane>
    </NTabs>
  </NModal>
</template>

<style>
.n-tabs .n-tabs-nav {
  padding: 15px;
}

.custom-card .n-card-header {
  display: none !important;
}

.custom-card .n-card__content {
  padding: 0 !important;
}

.custom-card-put .n-card-header {
  display: block !important;
}

.custom-card-put .n-card__content {
  padding: 20px !important;
}

.pay-list {
  display: flex;
  gap: 20px;
}

.pay-list-item {
  padding: 20px 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  box-shadow: inset 0 0 0 4px #ddd;
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
  flex: 1;
}

.pay-list-item:hover {
  box-shadow: inset 0 0 0 4px #05d561;
}

.pay-list-item .title {
  font-size: 14px;
  font-family: "Titillium Web", "Almarai", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #aaa;
}

.pay-list-item .price {
  margin-bottom: 0;
  font-size: 30px;
  transition: all 0.2s;
  color: #05d561;
}

.price-unit {
  font-size: 36px;
}

.pay-list-item-li {
  color: #333;
}

.pay-list-item .date {
  color: #aaa;
}

.html-pay {}
</style>
